<template>
    <div class="public-top-layout">
        <div class="public-top clearfix">
            <div class="public-l">
                <a href="https://www.ciip.com" target="_blank"><img src="https://resource.ciip.com/common/logo/ciipdefault.png" alt=""></a>
                <span class="vertical-line"></span>
                <nuxt-link v-if="isShowType === 'qiao'" to="/qiao/s" class="platform">供需中心</nuxt-link>
                <nuxt-link v-if="isShowType === 'commun'" to="/community" class="platform">社群中心</nuxt-link>
                <nuxt-link v-if="isShowType === 'institute'" to="/institute" class="platform">平台建筑研究院</nuxt-link>

                <el-dropdown placement="bottom-start" class="set-border">
                    <span class="el-dropdown-link">
                        <span style="font-size: 12px" @click="handleMap(locations)">{{locations.pname ?locations.pname: '全国'}}</span>
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" class="top-dropdown-area-menu">
                        <div class="top-area-main">
                            <span :key="15425" @click="handleMap({id: '',label:'全国'})">全国</span>
                            <span v-for="(ar,aIndex) in area" :key="aIndex" @click="handleMap(ar)">{{ar.label}}</span>
                        </div>
                    </el-dropdown-menu>
                </el-dropdown>

                <div class="search">
                    <input
                        type="text"
                        autocomplete="off"
                        id="inputStyle"
                        @focus="lengthenFn"
                        @blur="reduction"
                        v-model="searchWord"
                        class="input-word"
                        placeholder="检索">
                    <div class="list" v-if="isSearchWordList">
                        <nuxt-link
                            :to="`${sitem.url}?${sitem.params}=${searchWord}`"
                            v-for="(sitem, index) in searchWordList"
                            :key="index"
                            @click.native="handleSearch(sitem)">
                            在 <span>{{sitem.name}}</span> 中搜索
                        </nuxt-link>
                    </div>

                    <div class="handle">
                        <i class="close el-icon-close" v-if="isShow" @click="closeWord"></i>
                        <span class="vertical-line" v-if="isShow"></span>
                        <i class="search-icon el-icon-search" @click="searchFn"></i>
                    </div>
                </div>

            </div>

            <div class="public-r">
                <span class="top-my-ciip" @mousemove="handleCommand">
                    <el-dropdown placement="bottom">
                        <span class="el-dropdown-link" style="cursor: pointer">
                            <span>我的CIIP</span>
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown" class="my-ciip-list">
                            <el-row :gutter="20" class="content" v-loading="menuLoading">
                                <el-col :span="12" v-for="(citem, index) in ciipUrl" :key="index">
                                    <h3>{{citem.className}}</h3>
                                    <span class="active" @click.stop="jumpUrl(clitem, lindex)" v-for="(clitem, lindex) in citem.list" :key="lindex">{{clitem.name}}</span>
                                </el-col>
                            </el-row>
                        </el-dropdown-menu>

                    </el-dropdown>
                </span>

                <span class="top-my-ciip customer">
                    <el-dropdown placement="bottom">
                        <span class="el-dropdown-link" style="cursor: pointer">
                            <span>客户服务</span>
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown" class="my-ul">
                            <ul class="content-li">
                                <li><a target="_blank" href="https://jia.ciip.com/shop">入驻指南</a></li>
                                <li><a href="javaScript:;" @click="onlineService">在线客服</a></li>
                                <li><a target="_blank" href="https://www.ciip.com/help">帮助中心</a></li>
                            </ul>
                        </el-dropdown-menu>

                    </el-dropdown>
                </span>

                <a style="color: #606266;" v-if="!userInfoData.id" :href="ciipWebUrl+ '/login?redirectUrl=' + locationHref">登录</a>

                <a v-if="!userInfoData.id" target="_blank" :href="ciipWebUrl+ '/register'" class="register">注册有惊喜</a>

                <span class="top-my-ciip" v-else>
                    <el-dropdown placement="bottom">
                        <span class="el-dropdown-link" style="cursor: pointer">
                            <img :src="serFileUrl + userInfoData.logo" alt="" class="avatar">
                            {{userInfoData.username}}
                        </span>
                        <el-dropdown-menu slot="dropdown" class="my-ul">
                            <ul class="content-li">
                                <li><a target="_blank" :href="`${ciipWebUrl}/account`">账号管理</a></li>
                                <li><a :href="`${ciipWebUrl}/logout?redirectUrl=` + this.locationHref">退出</a></li>
                            </ul>
                        </el-dropdown-menu>
                    </el-dropdown>
                </span>
            </div>
        </div>

        <el-dialog title="提示" :visible.sync="noAuthor" width="20%">
            <div>
                请联系管理员，开通工作台权限
            </div>
        </el-dialog>

        <top-fixed class="fixed-right"></top-fixed>
    </div>
</template>

<script lang="ts">
import {
    Vue,
    Watch,
    Prop,
    Component
} from 'nuxt-property-decorator'
import topFixed from './fixed.vue'
import {provinceCityData} from '../../api/area'
import {requestResponse} from '../../../config/axios.conf'
import {ciipWebUrl} from '../../../config/server.url.conf'
import {ciipSerUrl} from '../../../config/server.url.conf'
import {serFileUrl} from '../../../config/server.url.conf'
const judgeCiipMenuAuthor = (id: any) => requestResponse('get', ciipSerUrl + '/authc/menu/authTree', {userid: id}, true)
@Component({
    name: '',
    components: {
        topFixed
    }
})
export default class PagePublicTop extends Vue {
    pathRoute: any = ''
    ciipWebUrl: string = ciipWebUrl
    serFileUrl: string = serFileUrl
    locationHref: string = ''
    menuLoading: boolean = false
    locations: any = {
        provinceId: '',
        cityId: '',
        pname: '',
        cname: ''
    }
    area: any = provinceCityData
    searchWord: string = ''
    isSearchWordList: boolean = false
    searchWordList: any = []
    noAuthor: boolean = false
    flag: boolean = false
    getAllRoutes: any = []
    ciipUrl: any = [
        {
            className: '智慧建造工作台',
            list: [
                {
                    name: '项目管理',
                    url: '/building/prj'
                }, {
                    name: '新建项目',
                    url: '/building/prj'
                }
            ]
        }, {
            className: '合作伙伴工作台',
            list: [
                {
                    name: '客户管理',
                    url: '/partners/cusdev'
                }, {
                    name: '伙伴计划',
                    url: '/partners/plan'
                }
            ]
        }, {
            className: '供方工作台',
            list: [
                {
                    name: '订单管理',
                    url: '/business/order/build'
                }, {
                    name: '产品管理',
                    url: '/business/products/build'
                }, {
                    name: '客服管理',
                    url: '/business/shop/counseling'
                }
            ]
        }, {
            className: '需方工作台',
            list: [
                {
                    name: '订单管理',
                    url: '/me/order/build'
                }, {
                    name: '需求管理',
                    url: '/business/dynamo/demand'
                }
            ]
        }
    ]
    isShow: boolean = false
    @Prop({
        type: Object,
        default: {}
    }) userInfoData !: any
    @Prop() isShowType !: string
    @Watch('isShowType', {immediate: true})
    isShowTypeFn (val: any) {
        switch (val) {
            case 'qiao':
                this.searchWordList = [
                    {
                        url: '/qiao/d',
                        name: '需求大厅',
                        params: 'wordText',
                        type: ''
                    }, {
                        url: '/qiao/s',
                        name: '服务大厅',
                        params: 'wordText',
                        type: ''
                    }
                ]
                break
            case 'commun':
                this.searchWordList = [
                    {
                        url: '/community/expert',
                        name: '专家中心',
                        params: 'wordText',
                        type: ''
                    }, {
                        url: '/community/article',
                        name: '文章',
                        params: 'wordText',
                        type: ''
                    }
                ]
                break
        }
    }
    @Watch('searchWord', {immediate: true})
    searchWordFn (newVal: any) {
        if (newVal !== '') {
            this.isShow = true
            this.isSearchWordList = true
        } else {
            this.isShow = false
            this.isSearchWordList = false
        }
    }
    @Watch('userInfoData.selectRoleType', {immediate: true})
    selectRoleTypeFn (val: any) {
        if (val === 'AGENGY') {
            this.judgeCiipMenuAuthorFn()
        }
    }
    handleMap (val: any) {
        const json = {
            provinceId: val.id,
            cityId: '',
            pname: val.label,
            cname: ''
        }
        this.locations = json
        // this.setArea(json)
    }
    closeWord () {
        this.isShow = true
        this.searchWord = ''
    }
    lengthenFn () {
        const inputDom = document.getElementById('inputStyle') as any
        inputDom.style.width = '270px'
    }
    reduction () {
        const inputDom = document.getElementById('inputStyle') as any
        inputDom.style.width = '170px'
    }
    // 搜索默认跳转第一个
    searchFn () {
        this.$router.push(`${this.searchWordList[0].url}?${this.searchWordList[0].params}=${this.searchWord}`)
    }
    handleSearch () {
        setTimeout(() => {
            this.searchWord = ''
        }, 1000)
    }
    // 在线客户
    onlineService () {
        const workerId = 1
        const ww = 800
        const wh = 600
        const itop = (window.screen.height - 30 - wh) / 2
        const ileft = (window.screen.width - 10 - ww) / 2
        const ourl = window.location.href
        window.open(`https://tb.53kf.com/code/client/6ea5ef686e1e3682688ddc64d3c13328/${workerId}?custom_channel=${ourl}`, '', `width=${ww},height=${wh},top=${itop},left=${ileft},toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no`)
    }
    // 我的ciip跳转方法
    jumpUrl (item: any) {
        if (this.userInfoData.id) {
            const url = item.url

            for (let i = 0; i < this.getAllRoutes.length; i++) {
                if (this.getAllRoutes[i].href === url) {
                    window.open(`${this.ciipWebUrl}${url}`)
                } else {
                    this.noAuthor = true
                    setTimeout(() => {
                        this.noAuthor = false
                    }, 1000)
                }
            }
        } else {
            window.location.href = this.ciipWebUrl + '/login?redirectUrl=' + this.locationHref
        }
    }
    // 递归路由数据
    recursiveRoutes (data: any) {
        for (const i in data) {
            if (data[i].nodes === 'undefined') {
                this.getAllRoutes.push(data[i])
                return
            } else {
                this.recursiveRoutes(data[i].nodes)
                delete data[i].nodes
                this.getAllRoutes.push(data[i])
            }
        }
    }
    // 获取路由权限数据
    async judgeCiipMenuAuthorFn () {
        this.menuLoading = true
        const {data}: any = await judgeCiipMenuAuthor(this.userInfoData.id)
        this.menuLoading = false
        if (data.code >= 0) {
            const ciipUrlList = data.data
            this.recursiveRoutes(ciipUrlList)
        }
    }
    handleCommand () {
        if (this.userInfoData.id && !this.flag) {
            this.flag = true
            this.judgeCiipMenuAuthorFn()
        }
    }
    mounted () {
        this.pathRoute = this.$route.path
        if (window.location) {
            this.locationHref = window.location.href
        }
    }
}
</script>

<style lang="scss" scoped>
    $orange: #11A9E8;
    $min-font-size: 12px;
    $black: #333;
    .public-top-layout{
        .public-top{
            max-width: 1200px;
            min-width: 1200px;
            margin: 0 auto;
            padding: 15px 0;
            .public-l{
                float: left;
                display: flex;
                justify-content: center;
                align-items: center;

                .vertical-line{
                    margin: 0 10px;
                    width: 2px;
                    height: 20px;
                    background: #ddd;
                }

                .platform{
                    font-size: 20px;
                    font-weight: bold;
                    color: #333;
                }

                .set-border{
                    margin: 0 15px;
                    padding: 5px;
                    border: 1px solid #ddd;
                    cursor: pointer;
                }

                .search{
                    position: relative;
                    .input-word{
                        padding: 0 15px;
                        width: 170px;
                        height: 32px;
                        background: #f8f8f8;
                        border: none;
                        outline: none;
                    }

                    .list{
                        padding: 10px 20px;
                        position: absolute;
                        width: 258px;
                        border: 1px solid #ddd;
                        background: #fff;
                        z-index: 10000;
                        a{
                            padding: 10px 0;
                            display: block;
                            font-size: 13px;
                            color: #999;
                            span{
                                font-weight: bold;
                                color: #333;
                            }
                        }
                    }

                    .handle{
                        position: absolute;
                        right: 15px;
                        top: 5px;
                        i, span{
                            display: inline-block;
                            vertical-align: middle;
                            cursor: pointer;
                        }
                        span{
                            height: 17px;
                        }
                        .close:before, .search-icon:before{
                            font-size: 22px;
                            color: #ddd;
                        }
                    }
                }
            }
            .public-r{
                float: right;
                font-size: 14px;
                .customer{
                    margin: 0 30px;
                }

                .logon{
                    color: #333;
                }
                a{
                    color: #333;
                }

                .register{
                    margin: 0 30px;
                    display: inline-block;
                    width: 102px;
                    height: 32px;
                    background: #11a9e8;
                    text-align: center;
                    line-height: 32px;
                    color: #fff;
                }
            }
        }
        .avatar{
            width: 24px;
            height: 24px;
            border-radius: 12px;
        }
    }
</style>
<style lang="scss">
    $orange: #11A9E8;
    $min-font-size: 12px;
    $black: #333;
    .top-dropdown-area-menu{
        .top-area-main{
            width: 340px;
            padding: 5px 10px;
            span{
                display: inline-block;
                font-size: $min-font-size;
                color: $black;
                cursor: pointer;
                padding: 0 5px;
                margin-bottom: 5px;
                &:hover{
                    color: $orange;
                }
            }
        }
    }

    .my-ciip-list{
        padding: 0!important;
        .content{
            width: 370px;
            padding: 0px 20px 10px;
            margin: 0!important;
            h3{
                padding: 20px 0 10px;
                font-size: 14px;
                font-weight: bold;
                border-bottom: 1px solid #ddd;
            }
            .active{
                display: block;
                padding: 10px 0;
                cursor: pointer;
                font-size: 14px;
                color: #666;
            }
        }
    }

    .my-ul{
        padding: 10px 20px!important;
        .content-li{
            padding: 0!important;
        }
        li{
            padding: 10px 0;
            a{
                font-size: 14px;
                color: #333;
            }
        }
    }
    .fixed-right{
        position: fixed;
        right: 0;
        bottom: 300px;
        z-index: 1000000;
    }
</style>
